<script setup>
import logoImage from './assets/lgoo.jpg'

// 导入所有配对版图片，就像logo一样
import hong1 from './assets/hong1.jpg'
import hong2 from './assets/hong2.jpg'
import hong3 from './assets/hong3.jpg'
import hong4 from './assets/hong4.jpg'
import hong5 from './assets/hong5.jpg'
import hong6 from './assets/hong6.jpg'
import hong7 from './assets/hong7.jpg'
import hong8 from './assets/hong8.jpg'
import hong9 from './assets/hong9.jpg'
import hong10 from './assets/hong10.jpg'
import hong11 from './assets/hong11.jpg'
import hong12 from './assets/hong12.jpg'
import hong13 from './assets/hong13.jpg'
import hong14 from './assets/hong14.jpg'
import hong15 from './assets/hong15.jpg'
import hong16 from './assets/hong16.jpg'
import hong17 from './assets/hong17.jpg'
import hong18 from './assets/hong18.jpg'
import hong19 from './assets/hong19.jpg'
import hong20 from './assets/hong20.jpg'
import hong21 from './assets/hong21.jpg'
import hong22 from './assets/hong22.jpg'
import hong23 from './assets/hong23.jpg'
import hong24 from './assets/hong24.jpg'
import hong25 from './assets/hong25.jpg'
import hong26 from './assets/hong26.jpg'
import hong27 from './assets/hong27.jpg'
import hong28 from './assets/hong28.jpg'
import hong29 from './assets/hong29.jpg'
import hong30 from './assets/hong30.jpg'
import hong31 from './assets/hong31.jpg'
import hong32 from './assets/hong32.jpg'
import hong33 from './assets/hong33.jpg'
import hong34 from './assets/hong34.jpg'
import hong35 from './assets/hong35.jpg'
import hong36 from './assets/hong36.jpg'
import hong37 from './assets/hong37.jpg'
import hong38 from './assets/hong38.jpg'
import hong39 from './assets/hong39.jpg'
import hong40 from './assets/hong40.jpg'

// 导入所有玩法版图片，就像logo一样
import wanfa1 from './assets/wanfa1.png'
import wanfa2 from './assets/wanfa2.png'
import wanfa3 from './assets/wanfa3.png'
import wanfa4 from './assets/wanfa4.png'
import wanfa5 from './assets/wanfa5.png'
import wanfa6 from './assets/wanfa6.png'
import wanfa7 from './assets/wanfa7.png'
import wanfa8 from './assets/wanfa8.png'
import wanfa9 from './assets/wanfa9.png'
import wanfa10 from './assets/wanfa10.png'
import wanfa11 from './assets/wanfa11.png'
import wanfa12 from './assets/wanfa12.png'
import wanfa13 from './assets/wanfa13.png'
import wanfa14 from './assets/wanfa14.png'
import wanfa15 from './assets/wanfa15.png'
import wanfa16 from './assets/wanfa16.png'
import wanfa17 from './assets/wanfa17.png'
import wanfa18 from './assets/wanfa18.png'
import wanfa19 from './assets/wanfa19.png'
import wanfa20 from './assets/wanfa20.png'

// 导入抽奖奖品图片
import chou1 from './assets/chou1.png'
import chou2 from './assets/chou2.png'
import chou3 from './assets/chou3.png'
import chou4 from './assets/chou4.png'
import chou5 from './assets/chou5.png'
import chou6 from './assets/chou6.png'
</script>

<template>
  <div id="app">
    <!-- 全屏波浪水印 -->
    <div class="water-container">
      <div class="water-text" v-for="index in 80" :key="index">
        <div>白菜电竞</div>
      </div>
    </div>
    
    <div class="header-section">
          <div class="logo">
            <img :src="logoImage" alt="白菜电竞" class="logo-image">
            <span class="logo-text">白菜电竞</span>
          </div>
      
      <div class="version-tabs">
        <div 
          class="tab-item"
          :class="{ active: gameVersion === 'matching' }"
          @click="switchVersion('matching')"
        >
          配对版
        </div>
        <div 
          class="tab-item"
          :class="{ active: gameVersion === 'gameplay' }"
          @click="switchVersion('gameplay')"
        >
          玩法版
        </div>
        <div 
          class="tab-item"
          :class="{ active: gameVersion === 'lottery' }"
          @click="switchVersion('lottery')"
        >
          抽奖
        </div>
      </div>
    </div>
    
    <div class="game-container">
      <div class="game-area">
        <div class="game-board" :class="[gameVersion, gameVersion === 'matching' ? matchingMode : '']">
          <div 
            v-for="(card, index) in cards" 
            :key="index"
            class="card"
            :class="{ 
              'flipped': card.isFlipped, 
              'matched': card.isMatched 
            }"
            @click="flipCard(index)"
            @touchstart="handleTouchStart"
            @touchend="handleTouchEnd"
          >
            <div class="card-inner">
              <div class="card-front">
                <span class="card-number">{{ card.displayNumber }}</span>
              </div>
              <div class="card-back">
                <img v-if="gameVersion === 'matching'" :src="card.matchingImage" :alt="'配对图片' + (card.value)" class="matching-image">
                <img v-else-if="gameVersion === 'gameplay'" :src="card.playMethodImage" :alt="'玩法' + (card.value)" class="play-method-image">
                <img v-else-if="gameVersion === 'lottery'" :src="card.lotteryImage" :alt="'奖品图片'" class="lottery-image">
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 配对版和玩法版显示状态栏 -->
      <div v-if="gameVersion !== 'lottery'" class="sidebar">
        <div class="header">
          <h1>翻翻乐</h1>
          <button @click="resetGame" class="reset-btn">重新开始</button>
        </div>
        
        <!-- 配对版模式切换 -->
        <div v-if="gameVersion === 'matching'" class="mode-switch">
          <div class="mode-buttons">
            <button 
              class="mode-btn"
              :class="{ active: matchingMode === 'normal' }"
              @click="switchMatchingMode('normal')"
            >
              普通版
            </button>
            <button 
              class="mode-btn"
              :class="{ active: matchingMode === 'hard' }"
              @click="switchMatchingMode('hard')"
            >
              困难版
            </button>
          </div>
        </div>
        
        <div class="game-info">
          <div class="info-item">
            <span class="label">步数:</span>
            <span class="value">{{ moves }}</span>
          </div>
          <div class="info-item">
            <span v-if="gameVersion === 'matching'" class="label">已成功:</span>
            <span v-else-if="gameVersion === 'gameplay'" class="label">已翻开:</span>
            <span class="value">
              <span v-if="gameVersion === 'matching' && matchingMode === 'normal'">{{ Math.floor(score / 10) }}/10</span>
              <span v-if="gameVersion === 'matching' && matchingMode === 'hard'">{{ Math.floor(score / 10) }}/15</span>
              <span v-if="gameVersion === 'gameplay'">{{ Math.floor(score / 5) }}/20</span>
            </span>
          </div>
          
          <!-- 提示信息 -->
          <div class="tip-info">
            <span class="tip-text">订单开始后，未结束前请不要切换模式，否则模版将重置</span>
          </div>
        </div>
        
        <div v-if="gameWon" class="game-won">
          <h2>恭喜！游戏完成！</h2>
          <button @click="resetGame" class="reset-btn">再玩一次</button>
        </div>
      </div>
    </div>
    
    <!-- 玩法版Toast提示 -->
    <div v-if="showToast && gameVersion === 'gameplay'" class="play-method-toast">
      <div class="toast-content">
        <button class="close-btn" @click="closeToast">×</button>
        <h3 class="toast-title">下把玩法：</h3>
        <img :src="currentPlayMethod" :alt="'玩法图片'" class="toast-image">
      </div>
    </div>
    
    <!-- 抽奖版Toast提示 -->
    <div v-if="showToast && gameVersion === 'lottery'" class="play-method-toast">
      <div class="toast-content">
        <button class="close-btn" @click="closeToast">×</button>
        <h3 class="toast-title">恭喜中奖：</h3>
        <img :src="currentPlayMethod" :alt="'奖品图片'" class="toast-image">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      gameVersion: 'matching', // 'matching' 或 'gameplay'
      matchingMode: 'normal', // 'normal' 或 'hard'
      cards: [],
      flippedCards: [],
      score: 0,
      moves: 0,
      gameWon: false,
      canFlip: true,
      touchStartTime: 0,
      showToast: false,
      currentPlayMethod: '',
      playMethods: [
        wanfa1,
        wanfa2, 
        wanfa3,
        wanfa4,
        wanfa5,
        wanfa6,
        wanfa7,
        wanfa8,
        wanfa9,
        wanfa10,
        wanfa11,
        wanfa12,
        wanfa13,
        wanfa14,
        wanfa15,
        wanfa16,
        wanfa17,
        wanfa18,
        wanfa19,
        wanfa20
      ],
      // 抽奖版图片数据：20张奖品图片
      lotteryImages: [
        // chou1: 4张
        chou1, chou1, chou1, chou1,
        // chou2: 1张
        chou2,
        // chou3: 2张
        chou3, chou3,
        // chou4: 4张
        chou4, chou4, chou4, chou4,
        // chou5: 5张
        chou5, chou5, chou5, chou5, chou5,
        // chou6: 4张
        chou6, chou6, chou6, chou6
      ],
      // 配对版图片数据：40张图片，每张有id和图片地址
      matchingImages: [
        { id: 1, image: hong1 },
        { id: 2, image: hong2 },
        { id: 3, image: hong3 },
        { id: 4, image: hong4 },
        { id: 5, image: hong5 },
        { id: 6, image: hong6 },
        { id: 7, image: hong7 },
        { id: 8, image: hong8 },
        { id: 9, image: hong9 },
        { id: 10, image: hong10 },
        { id: 11, image: hong11 },
        { id: 12, image: hong12 },
        { id: 13, image: hong13 },
        { id: 14, image: hong14 },
        { id: 15, image: hong15 },
        { id: 16, image: hong16 },
        { id: 17, image: hong17 },
        { id: 18, image: hong18 },
        { id: 19, image: hong19 },
        { id: 20, image: hong20 },
        { id: 21, image: hong21 },
        { id: 22, image: hong22 },
        { id: 23, image: hong23 },
        { id: 24, image: hong24 },
        { id: 25, image: hong25 },
        { id: 26, image: hong26 },
        { id: 27, image: hong27 },
        { id: 28, image: hong28 },
        { id: 29, image: hong29 },
        { id: 30, image: hong30 },
        { id: 31, image: hong31 },
        { id: 32, image: hong32 },
        { id: 33, image: hong33 },
        { id: 34, image: hong34 },
        { id: 35, image: hong35 },
        { id: 36, image: hong36 },
        { id: 37, image: hong37 },
        { id: 38, image: hong38 },
        { id: 39, image: hong39 },
        { id: 40, image: hong40 }
      ]
    }
  },
  mounted() {
    this.loadGameState()
  },
  beforeUnmount() {
    this.saveGameState()
  },
  methods: {
    initializeGame() {
      if (this.gameVersion === 'gameplay') {
        // 玩法版：20张卡片，不需要配对
        this.initializeGameplayVersion()
      } else if (this.gameVersion === 'lottery') {
        // 抽奖版：20张卡片，不需要配对
        this.initializeLotteryVersion()
      } else {
        // 配对版：30张卡片，需要配对
        this.initializeMatchingVersion()
      }
      
      this.resetGameState()
      
      // 初始化成功后立即保存状态
      this.saveGameState()
    },
    
    initializeGameplayVersion() {
      // 玩法版：20张卡片，每张卡片对应一个玩法图片
      const totalCards = 20
      
      // 生成1-20的唯一数字作为卡片ID
      let cardData = Array.from({length: totalCards}, (_, i) => i + 1)
      
      // 随机打乱数据
      cardData = this.shuffleArray(cardData)
      
      // 生成随机的显示编号（1-20）
      let displayNumbers = Array.from({length: totalCards}, (_, i) => i + 1)
      displayNumbers = this.shuffleArray(displayNumbers)
      
      // 创建卡片对象，每张卡片对应一个玩法图片
      this.cards = cardData.map((value, index) => ({
        id: index,
        value: value,
        displayNumber: displayNumbers[index],
        playMethodImage: this.playMethods[index], // 添加玩法图片路径
        isFlipped: false,
        isMatched: false
      }))
      
      // 调试信息
      console.log('玩法版初始化完成:', {
        totalCards,
        cards: this.cards.map(card => ({ id: card.id, value: card.value, playMethodImage: card.playMethodImage }))
      })
    },
    
    initializeLotteryVersion() {
      // 抽奖版：20张卡片，每张卡片对应一个奖品图片
      const totalCards = 20
      
      // 复制抽奖图片数组并随机打乱
      let shuffledLotteryImages = [...this.lotteryImages]
      shuffledLotteryImages = this.shuffleArray(shuffledLotteryImages)
      
      // 生成1-20的唯一数字作为卡片ID
      let cardData = Array.from({length: totalCards}, (_, i) => i + 1)
      
      // 随机打乱数据
      cardData = this.shuffleArray(cardData)
      
      // 生成随机的显示编号（1-20）
      let displayNumbers = Array.from({length: totalCards}, (_, i) => i + 1)
      displayNumbers = this.shuffleArray(displayNumbers)
      
      // 创建卡片对象，每张卡片对应一个随机位置的奖品图片
      this.cards = cardData.map((value, index) => ({
        id: index,
        value: value,
        displayNumber: displayNumbers[index],
        lotteryImage: shuffledLotteryImages[index], // 使用随机打乱后的奖品图片
        isFlipped: false,
        isMatched: false
      }))
      
      // 调试信息
      console.log('抽奖版初始化完成:', {
        totalCards,
        shuffledImages: shuffledLotteryImages,
        cards: this.cards.map(card => ({ id: card.id, value: card.value, lotteryImage: card.lotteryImage }))
      })
    },
    
    initializeMatchingVersion() {
      // 根据模式决定卡片数量
      const totalCards = this.matchingMode === 'normal' ? 20 : 30
      const pairs = totalCards / 2
      
      // 从40张图片中随机选择指定数量的图片
      let availableImages = [...this.matchingImages]
      let selectedImages = []
      
      // 随机选择图片
      for (let i = 0; i < pairs; i++) {
        const randomIndex = Math.floor(Math.random() * availableImages.length)
        selectedImages.push(availableImages[randomIndex])
        availableImages.splice(randomIndex, 1) // 移除已选择的图片
      }
      
      // 生成配对数据：每张图片出现两次
      let cardData = []
      for (let i = 0; i < pairs; i++) {
        cardData.push(selectedImages[i], selectedImages[i]) // 每张图片出现两次
      }
      
      // 随机打乱数据
      cardData = this.shuffleArray(cardData)
      
      // 生成随机的显示编号
      let displayNumbers = Array.from({length: totalCards}, (_, i) => i + 1)
      displayNumbers = this.shuffleArray(displayNumbers)
      
      // 创建卡片对象
      this.cards = cardData.map((value, index) => ({
        id: index,
        value: value.id, // 使用图片的id进行配对
        displayNumber: displayNumbers[index],
        matchingImage: value.image, // 添加配对图片路径
        isFlipped: false,
        isMatched: false
      }))
      
      // 调试信息
      console.log('配对版初始化完成:', {
        mode: this.matchingMode,
        totalCards,
        pairs,
        selectedImages: selectedImages.map(img => ({ id: img.id, image: img.image })),
        cards: this.cards.map(card => ({ id: card.id, value: card.value, matchingImage: card.matchingImage }))
      })
    },
    
    saveGameState() {
      const gameState = {
        gameVersion: this.gameVersion,
        matchingMode: this.matchingMode,
        cards: this.cards,
        score: this.score,
        moves: this.moves,
        gameWon: this.gameWon,
        timestamp: Date.now()
      }
      localStorage.setItem('fanyifan-game-state', JSON.stringify(gameState))
    },
    
    switchVersion(version) {
      if (this.gameVersion !== version) {
        this.gameVersion = version
        // 切换版本后重新开始游戏
        this.resetGame()
      }
    },
    
    switchMatchingMode(mode) {
      if (this.matchingMode !== mode) {
        this.matchingMode = mode
        // 切换模式后重新开始游戏
        this.resetGame()
      }
    },
    
    showPlayMethodToast(cardIndex) {
      // 获取指定索引的卡片
      const currentCard = this.cards[cardIndex]
      
      if (currentCard && currentCard.playMethodImage) {
        this.currentPlayMethod = currentCard.playMethodImage
        this.showToast = true
      }
    },
    
    showLotteryToast(cardIndex) {
      // 获取指定索引的卡片
      const currentCard = this.cards[cardIndex]
      
      if (currentCard && currentCard.lotteryImage) {
        this.currentPlayMethod = currentCard.lotteryImage
        this.showToast = true
      }
    },
    
    closeToast() {
      this.showToast = false
    },
    
    loadGameState() {
      const savedState = localStorage.getItem('fanyifan-game-state')
      if (savedState) {
        try {
          const gameState = JSON.parse(savedState)
          // 检查保存的游戏是否过期（24小时）
          const isExpired = Date.now() - gameState.timestamp > 24 * 60 * 60 * 1000
          
          if (!isExpired && gameState.cards && !gameState.gameWon) {
            // 恢复游戏状态
            this.gameVersion = gameState.gameVersion || 'matching'
            this.matchingMode = gameState.matchingMode || 'normal'
            this.cards = gameState.cards
            this.score = gameState.score
            this.moves = gameState.moves
            this.gameWon = gameState.gameWon
            this.flippedCards = []
            this.canFlip = true
            console.log('游戏状态已恢复')
          } else {
            // 游戏已完成或已过期，重新开始
            this.initializeGame()
            console.log('开始新游戏')
          }
        } catch (error) {
          console.error('加载游戏状态失败:', error)
          this.initializeGame()
        }
      } else {
        // 没有保存的游戏状态，开始新游戏
        this.initializeGame()
        console.log('开始新游戏')
      }
    },
    
    shuffleArray(array) {
      const newArray = [...array]
      for (let i = newArray.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1))
        ;[newArray[i], newArray[j]] = [newArray[j], newArray[i]]
      }
      return newArray
    },
    
    resetGameState() {
      this.flippedCards = []
      this.score = 0
      this.moves = 0
      this.gameWon = false
      this.canFlip = true
      
      this.cards.forEach(card => {
        card.isFlipped = false
        card.isMatched = false
      })
    },
    
    resetGame() {
      // 清除保存的游戏状态
      localStorage.removeItem('fanyifan-game-state')
      this.initializeGame()
    },
    
    handleTouchStart() {
      this.touchStartTime = Date.now()
    },
    
    handleTouchEnd() {
      // 防止触摸事件与点击事件冲突
      const touchDuration = Date.now() - this.touchStartTime
      if (touchDuration < 300) { // 短触摸才响应
        return
      }
    },
    
    flipCard(index) {
      if (!this.canFlip || this.cards[index].isMatched) {
        return
      }
      
      if (this.gameVersion === 'gameplay') {
        // 玩法版逻辑
        if (!this.cards[index].isFlipped) {
          // 第一次翻开卡片
          this.cards[index].isFlipped = true
          this.flippedCards.push(index)
          this.moves++
          this.score += 5 // 玩法版每翻一张卡片得5分
          
          // 显示toast
          this.showPlayMethodToast(index)
          
          // 检查是否所有卡片都翻开了
          if (this.cards.every(card => card.isFlipped)) {
            this.gameWon = true
          }
          
          // 保存游戏状态
          this.saveGameState()
        } else {
          // 已经翻开的卡片，再次点击时重新显示toast
          this.showPlayMethodToast(index)
        }
      } else if (this.gameVersion === 'lottery') {
        // 抽奖版逻辑
        if (!this.cards[index].isFlipped) {
          // 第一次翻开卡片
          this.cards[index].isFlipped = true
          this.flippedCards.push(index)
          this.moves++
          this.score += 5 // 抽奖版每翻一张卡片得5分
          
          // 显示抽奖结果Toast
          this.showLotteryToast(index)
          
          // 检查是否所有卡片都翻开了
          if (this.cards.every(card => card.isFlipped)) {
            this.gameWon = true
          }
          
          // 保存游戏状态
          this.saveGameState()
        } else {
          // 已经翻开的卡片，再次点击时重新显示Toast
          this.showLotteryToast(index)
        }
      } else {
        // 配对版逻辑
        if (this.cards[index].isFlipped) {
          return // 已经翻开的卡片不能再次点击
        }
        
        // 翻转卡片
        this.cards[index].isFlipped = true
        this.flippedCards.push(index)
        
        if (this.flippedCards.length === 2) {
          this.moves++
          this.canFlip = false
          
          // 根据模式设置不同的延迟时间
          const delay = this.matchingMode === 'normal' ? 800 : 600 // 普通版0.8秒，困难版0.6秒
          setTimeout(() => {
            this.checkMatch()
          }, delay)
        }
      }
    },
    
    checkMatch() {
      const [firstIndex, secondIndex] = this.flippedCards
      const firstCard = this.cards[firstIndex]
      const secondCard = this.cards[secondIndex]
      
      if (firstCard.value === secondCard.value) {
        // 匹配成功
        firstCard.isMatched = true
        secondCard.isMatched = true
        this.score += 10
        
        // 检查游戏是否完成
        if (this.cards.every(card => card.isMatched)) {
          this.gameWon = true
        }
      } else {
        // 匹配失败，翻回卡片
        firstCard.isFlipped = false
        secondCard.isFlipped = false
      }
      
      // 重置翻转状态
      this.flippedCards = []
      this.canFlip = true
      
      // 保存游戏状态
      this.saveGameState()
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#app {
  font-family: 'Arial', sans-serif;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
  min-height: 100vh;
  padding: 20px;
  overflow: auto;
}

.header-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  margin-bottom: 0;
  position: relative;
}

.logo {
  flex-shrink: 0;
}

/* 全屏波浪水印 */
.water-container {
  width: 150vw;
  height: 150vh;
  position: fixed;
  top: -25vh;
  left: -25vw;
  z-index: 2;
  transform: rotate(-45deg);
  display: flex;
  flex-wrap: wrap;
  pointer-events: none;
}

.water-text {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.2);
  margin: 60px 25px;
  padding: 15px;
  text-align: center;
  white-space: nowrap;
  font-weight: bold;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-image {
  height: 40px;
  width: auto;
  filter: drop-shadow(0 0 10px rgba(0, 255, 136, 0.5));
}



.logo-text {
  font-size: 1.8rem;
  font-weight: bold;
  color: white;
  text-shadow: 
    0 0 10px rgba(255, 255, 255, 0.5),
    0 0 20px rgba(255, 255, 255, 0.3),
    2px 2px 4px rgba(0, 0, 0, 0.8);
}



.version-tabs {
  display: flex;
  gap: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.tab-item {
  padding: 8px 20px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: bold;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

.tab-item:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.tab-item.active {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}

.game-container {
  max-width: 1200px;
  margin: 0 auto;
  min-height: calc(100vh - 80px);
  display: flex;
  gap: 20px;
  padding-top: 0;
}

h1 {
  color: white;
  font-size: 2.5rem;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  margin: 0;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  text-align: center;
}

.reset-btn {
  background: #ff6b6b;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  transition: all 0.3s ease;  /* 确保按钮内文字完美居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px; /* 移动端触摸友好 */
  line-height: 1;
}

.reset-btn:hover {
  background: #ff5252;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255,107,107,0.4);
}

.game-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-board {
  display: grid;
  gap: 10px;
  max-width: 600px;
  width: 100%;
}

.game-board.matching.normal {
  grid-template-columns: repeat(5, 1fr); /* 5x4 网格，20张卡片 */
}

.game-board.matching.hard {
  grid-template-columns: repeat(6, 1fr); /* 6x5 网格，30张卡片 */
}

.game-board.gameplay {
  grid-template-columns: repeat(5, 1fr); /* 5x4 网格，20张卡片 */
}

.game-board.lottery {
  grid-template-columns: repeat(5, 1fr); /* 5x4 网格，20张卡片 */
}

.card {
  aspect-ratio: 1;
  perspective: 1000px;
  cursor: pointer;
  /* 移动端触摸优化 */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  min-width: 0;
  min-height: 0;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  /* 减少动画时间，提升移动端体验 */
  transition: transform 0.3s ease-out;
  transform-style: preserve-3d;
  /* 移动端性能优化 */
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card.flipped .card-inner {
  transform: rotateY(180deg);
}

.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  /* 移动端性能优化 */
  will-change: transform;
}

.card-front {
  background: linear-gradient(45deg, #ff9a9e 0%, #fecfef 100%);
  color: white;
}

.card-back {
  background: linear-gradient(45deg, #a8edea 0%, #fed6e3 100%);
  color: #333;
  transform: rotateY(180deg);
}

.card.matched .card-back {
  background: linear-gradient(45deg, #84fab0 0%, #8fd3f4 100%);
  color: white;
}

.card-number {
  font-size: 1.2rem;
}

.card-value {
  font-size: 1.8rem;
}

.sidebar {
  width: 250px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 20px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.game-info {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: white;
}

.info-item .label {
  font-weight: bold;
  font-size: 1rem;
}

.info-item .value {
  font-size: 1.2rem;
  font-weight: bold;
  color: #ffd700;
}

.tip-info {
  padding: 12px;
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 8px;
  margin-top: 10px;
}

.tip-text {
  color: #ffc107;
  font-size: 0.85rem;
  line-height: 1.4;
  text-align: center;
  display: block;
}

.mode-switch {
  display: flex;
  justify-content: center;
  margin-top: 15px;
  margin-bottom: 20px;
}

.mode-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: white;
}

.mode-buttons {
  display: flex;
  gap: 8px;
}

.mode-btn {
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 15px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: bold;
  transition: all 0.3s ease;
}

.mode-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.mode-btn.active {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.2);
}

.play-method-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2000;
  animation: toastSlideIn 0.3s ease-out;
}

.toast-content {
  background: white;
  border: 2px solid #00ff88;
  border-radius: 15px;
  padding: 25px;
  max-width: 500px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  position: relative;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #666;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.close-btn:hover {
  background: #f0f0f0;
  color: #333;
}

.toast-title {
  color: #00ff88;
  font-size: 1.5rem;
  margin: 0 0 15px 0;
  font-weight: bold;
}

.toast-method {
  color: #333;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  word-wrap: break-word;
}

.play-method-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.matching-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.lottery-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.toast-image {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

@keyframes toastSlideIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.game-won {
  background: rgba(255,255,255,0.95);
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
  text-align: center;
  margin-top: auto;
}

.game-won h2 {
  color: #4CAF50;
  margin-bottom: 20px;
  font-size: 2rem;
}

.game-won p {
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: #333;
}

/* 移动端优化 */
@media (max-width: 768px) {
  #app {
    padding: 10px;
  }
  
  .header-section {
    flex-direction: column;
    gap: 15px;
    padding: 15px;
  }
  
  .logo {
    gap: 8px;
  }
  
  .logo-image {
    height: 32px;
  }
  
  .logo-text {
    font-size: 1.3rem;
  }
  
  /* 移动端水印适配 */
  .water-text {
    font-size: 14px;
    margin: 25px 20px;
    padding: 12px;
  }
  
  .version-tabs {
    position: static;
    transform: none;
    margin-top: 0;
  }
  
  .tab-item {
    padding: 6px 16px;
    font-size: 0.8rem;
  }
  
  .game-container {
    flex-direction: column;
    min-height: auto;
    gap: 15px;
    padding: 10px;
  }
  
  .game-area {
    order: 2;
  }
  
  .sidebar {
    order: 1;
    width: 100%;
    max-width: none;
    padding: 15px;
  }
  
  .header h1 {
    font-size: 1.8rem;
  }
  
  .reset-btn {
    padding: 8px 16px;
    font-size: 0.9rem;
    min-height: 40px;
  }
  
  .game-board {
    gap: 6px;
    max-width: 100%;
    width: 100%;
    padding: 0 10px;
  }
  
  .game-board.matching.normal {
    grid-template-columns: repeat(5, 1fr); /* 移动端5x4网格，确保完整行 */
  }
  
  .game-board.matching.hard {
    grid-template-columns: repeat(6, 1fr); /* 移动端6x5网格，确保完整行 */
  }
  
  .game-board.gameplay {
    grid-template-columns: repeat(5, 1fr); /* 移动端5x4网格，确保完整行 */
  }
  
  .game-board.lottery {
    grid-template-columns: repeat(5, 1fr); /* 移动端5x4网格，确保完整行 */
  }
  
  .card-front, .card-back {
    font-size: 1rem;
  }
  
  .card-number {
    font-size: 0.8rem;
  }
  
  .card-value {
    font-size: 1.2rem;
  }
  
  .info-item {
    padding: 8px;
  }
  
  .info-item .label {
    font-size: 0.9rem;
  }
  
  .info-item .value {
    font-size: 1rem;
  }
  
  .tip-info {
    padding: 10px;
    margin-top: 8px;
  }
  
  .tip-text {
    font-size: 0.8rem;
  }
  
  .mode-buttons {
    gap: 6px;
  }
  
  .mode-btn {
    padding: 5px 10px;
    font-size: 0.7rem;
  }
  
  /* 移动端触摸反馈 */
  .card:active {
    transform: scale(0.95);
  }
  
  /* 减少移动端动画时间 */
  .card-inner {
    transition: transform 0.2s ease-out;
  }
  
  /* Toast移动端适配 */
  .play-method-toast {
    width: 90vw;
    max-width: none;
  }
  
  .toast-content {
    padding: 20px;
    max-width: none;
  }
  
  .toast-title {
    font-size: 1.3rem;
  }
  
  .toast-method {
    font-size: 0.9rem;
    line-height: 1.5;
  }
  
  .play-method-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
  }
  
  .matching-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
  }
  
  .toast-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
  }
  
  .close-btn {
    top: 8px;
    right: 12px;
    width: 28px;
    height: 28px;
    font-size: 1.3rem;
  }
  
  /* 游戏胜利弹窗移动端适配 */
  .game-won {
    padding: 20px;
    margin: 20px;
    width: calc(100vw - 40px);
  }
  
  .game-won h2 {
    font-size: 1.5rem;
  }
  
  .game-won p {
    font-size: 1rem;
  }
}

/* 超小屏幕适配 */
@media (max-width: 480px) {
  .game-board.matching.normal {
    grid-template-columns: repeat(4, 1fr); /* 超小屏4x5网格，确保完整行 */
  }
  
  .game-board.matching.hard {
    grid-template-columns: repeat(5, 1fr); /* 超小屏5x6网格，确保完整行 */
  }
  
  .game-board.gameplay {
    grid-template-columns: repeat(4, 1fr); /* 超小屏4x5网格，确保完整行 */
  }
  
  .game-board.lottery {
    grid-template-columns: repeat(4, 1fr); /* 超小屏4x5网格，确保完整行 */
  }
  
  .card-front, .card-back {
    font-size: 0.8rem;
  }
  
  .card-number {
    font-size: 0.7rem;
  }
  
  .card-value {
    font-size: 1rem;
  }
  
  .logo-text {
    font-size: 1.3rem;
  }
  
  .tab-item {
    padding: 5px 12px;
    font-size: 0.7rem;
  }
}

/* 高性能设备优化 */
@media (prefers-reduced-motion: no-preference) {
  .card-inner {
    transition: transform 0.3s ease-out;
  }
}

/* 低性能设备优化 */
@media (prefers-reduced-motion: reduce) {
  .card-inner {
    transition: transform 0.15s ease-out;
  }
}

/* 移动端触摸优化 */
@media (hover: none) and (pointer: coarse) {
  .card:hover {
    transform: none;
  }
  
  .reset-btn:hover {
    transform: none;
    box-shadow: none;
  }
  
  .mode-btn:hover {
    transform: none;
  }
  
  .tab-item:hover {
    transform: none;
  }
  
  .close-btn:hover {
    background: none;
    color: #666;
  }
}

/* 横屏适配 */
@media (orientation: landscape) and (max-height: 600px) {
  .header-section {
    padding: 10px;
    gap: 10px;
  }
  
  .logo-text {
    font-size: 1.2rem;
  }
  
  .game-container {
    gap: 10px;
    padding: 5px;
  }
  
  .sidebar {
    padding: 10px;
  }
  
  .game-board {
    gap: 4px;
  }
}


</style>
